/*
 * @Author: Mark
 * @Date: 2018-09-17 20:58:10
 * @LastEditors: Mark
 * @LastEditTime: 2018-09-19 12:46:26
 * @Description: 忘记密码登录
 */
 
 <template>
  <div class="forget-pwd">
    <header-login></header-login>
    <el-card class="box-card" shadow="hover">
      <div class="icon theme-color">
        静静地陪你-<i class="fa fa-heartbeat fa-color"></i>-走过了好远
      </div>
      <div>
        <!-- 第一步 输入用户名 -->
        <el-form v-if="usernameForm.isShow" status-icon :rules="usernameFormRules" :model="usernameForm" ref="usernameForm" label-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input  v-model="usernameForm.username" @keyup.enter.native="firstStep('usernameForm')" placeholder="请输入你的用户名" autofocus='true' clearable>
              <i slot="prefix" class="fa fa-user-circle"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button style=" width:100%" type="primary" @click="firstStep('usernameForm')">下一步
              <i class="fa fa-hand-o-right" aria-hidden="true"></i>
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 第二步回答问题 -->
        <el-form v-show="answerForm.isShow" status-icon :rules="answerFormRules" :model="answerForm" ref="answerForm" label-width="80px">
          <span>请回答:{{answerForm.question}}?</span>
          <el-form-item label="答案" prop="answer">
            <el-input v-model="answerForm.answer" placeholder="清输入您的答案" autofocus='true' clearable>
              <i slot="prefix" class="fa fa-question-circle-o"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button style=" width:100%" type="primary" @click="secondStep('answerForm')">下一步
              <i class="fa fa-hand-o-right" aria-hidden="true"></i>
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 重置密码 -->
        <el-form v-show="newPwdForm.isShow" status-icon :rules="newPwdFormRules" :model="newPwdForm" ref="newPwdForm" label-width="80px">
          <span>设置我的新密码</span>
          <el-form-item label="密 码" prop="newPwd">
            <el-input v-model="newPwdForm.newPwd" type="password" placeholder="请输入你的新密码" auto-complete="off" autofocus='true' clearable>
              <i slot="prefix" class="fa fa-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="confirmPwd">
            <el-input v-model="newPwdForm.confirmPwd" type="password" placeholder="再次输入你的新密码" auto-complete="off" clearable>
              <i slot="prefix" class="fa fa-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button style=" width:100%" type="primary" @click="thirdStep('newPwdForm')">重置密码
              <i class="fa fa-hand-peace-o" aria-hidden="true"></i>
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-progress :percentage="data.progress_percentage" :status="data.progress_status"></el-progress>
      <div class="link-item">
        <router-link to="/login" class="link">去登录 <i class="fa fa-smile-o"></i></router-link>
        <router-link to="/register" class="link">免费注册>></router-link>
      </div>
    </el-card>

    <el-card v-show="successCard.isShow" class="box-card" shadow="hover">
      <div class="icon theme-color">
        请想起我们-<i class="fa fa-venus-double fa-color"></i>-有过的从前
      </div>
      <el-button style=" width:80%" type="primary" @click="login">马上登录
        <i class="fa fa-hand-peace-o" aria-hidden="true"></i>
      </el-button>
      <el-progress style=" margin-top: 50px;" :percentage="data.progress_percentage" :status="data.progress_status"></el-progress>
      <div class="link-item">
        <router-link to="/login" class="link">去登录 <i class="fa fa-smile-o"></i></router-link>
        <router-link to="/register" class="link">免费注册>></router-link>
      </div>
    </el-card>

  </div>
</template>
 
<script>
  import index from '@/assets/js/login/login-forget-pwd.js'
  export default{
    ...index
  }
</script>

<style lang='scss' scoped>
 @import "@/assets/css/login/login-forget-pwd.scss";
</style>
